<template>
  <div class="app-container" v-loading="listLoading">
    <div class="filter-container">
      <div
        class="margin-b"
        v-show="createBtnShow"
        v-if="(videoPermisson==3 && initType == 'videos') || (audioPermisson==3 && initType == 'audios') || (articlePermisson==3 && initType == 'articles') || (previewPermisson == 3 && initType == 'previews')"
      >
        <el-button type="primary" icon="el-icon-edit" @click="linkToCreate">{{ createText }}</el-button>
      </div>
      <div>
        <el-input
          @keyup.enter.native="handleFilter"
          class="filter-item"
          v-model="listQuery.name"
          clearable
          placeholder="请输入课程名或讲师姓名进行搜索"
          style="width: 250px;"
        ></el-input>
        <el-select
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.parentCatId"
          clearable
          placeholder="请选择一级分类"
          @change="parentSelect"
        >
          <el-option
            v-for="item in parentCategoryOptions"
            :key="item.catId"
            :label="item.name"
            :value="item.catId"
          ></el-option>
        </el-select>
        <el-select
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.childCatId"
          clearable
          placeholder="请选择二级分类"
        >
          <el-option
            v-for="item in childCategoryOptions"
            :key="item.catId"
            :label="item.name"
            :value="item.catId"
          ></el-option>
        </el-select>
        <el-select
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.permission"
          clearable
          placeholder="请选择观看权限"
        >
          <el-option
            v-for="(key, value) in coursePermitOptions"
            :key="key"
            :label="value"
            :value="key"
          ></el-option>
        </el-select>
        <el-select
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.isHot"
          clearable
          placeholder="请选择是否热门"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.key"
            :label="item.key == 0 ? '不是热门' : '是热门'"
            :value="item.key"
          ></el-option>
        </el-select>
      </div>
      <div>
        <el-select
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.isLive"
          clearable
          placeholder="请选择是否预告"
          v-show="!previewShow"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.key"
            :label="item.key == 0 ? '不是预告' : '是预告'"
            :value="item.key"
          ></el-option>
        </el-select>
        <el-select
          v-if="listQuery.courseType === 0"
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.hasVideo"
          clearable
          placeholder="视频是否上传"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.key"
            :label="item.key == 0 ? '视频未上传' : '视频已上传'"
            :value="item.key"
          ></el-option>
        </el-select>
        <el-select
          v-if="listQuery.courseType === 1"
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.hasAudio"
          clearable
          placeholder="音频是否上传"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.key"
            :label="item.key == 0 ? '音频未上传' : '音频已上传'"
            :value="item.key"
          ></el-option>
        </el-select>
        <el-date-picker
          :editable="false"
          class="filter-item"
          @change="timeCheck(1)"
          type="date"
          format="yyyy-MM-dd"
          clearable
          :placeholder="previewShow ? '直播日期（开始）': '发布日期（开始）'"
          v-model="listQuery.startTime"
        ></el-date-picker>
        <el-date-picker
          :editable="false"
          class="filter-item"
          @change="timeCheck(2)"
          type="date"
          format="yyyy-MM-dd"
          clearable
          :placeholder="previewShow ? '直播日期（结束）' : '发布日期（结束）'"
          v-model="listQuery.endTime"
        ></el-date-picker>
        <el-button
          type="primary"
          class="search filter-item"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
      </div>
    </div>

    <el-table
      :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
      :data="tableData"
      element-loading-text="加载中..."
      fit
      highlight-current-row
      class="c-width100 color-222 family-PingFangSC-Regular font-s12"
    >
      <el-table-column align="center" label="名称">
        <template slot-scope="scope">
          <div class="clearfix">
            <div class="fl margin-r">
              <img :src="scope.row.courseAvatar" height="68" width="102" alt @error="setDefultImg" />
            </div>
            <div class="fl">
              <div class="c-overflow-h">
                <p class="fl font-s14 color-222 text-alignL line-limit-length">{{scope.row.name}}</p>
                <el-popover
                  class="fl"
                  v-if="scope.row.name.length>12"
                  placement="left"
                  width="400"
                  trigger="hover"
                >
                  <div>{{scope.row.name}}</div>
                  <i slot="reference" class="el-icon-view c-fc-deepskyblue margin-l10"></i>
                </el-popover>
              </div>
              <!-- <div class="font-s12 color-999 text-alignL line-limit-length">讲师：{{scope.row.lecturerName}}</div> -->
              <div class="c-overflow-h">
                <p
                  class="fl font-s12 color-999 text-alignL line-limit-length"
                >讲师：{{scope.row.lecturerName}}</p>
                <el-popover
                  class="fl font-s12"
                  style="font-size: 12px"
                  v-if="scope.row.lecturerName && scope.row.lecturerName.length>14"
                  placement="left"
                  width="400"
                  trigger="hover"
                >
                  <div>{{scope.row.lecturerName}}</div>
                  <i slot="reference" class="el-icon-view c-fc-deepskyblue margin-l10"></i>
                </el-popover>
              </div>
              <div class="font-s12 text-alignL">
                <span class="font-s12 c-fc-blue text-alignL">&yen;{{ scope.row.price }}</span>
                <span
                  class="font-s12 c-fc-blue text-alignL type"
                >{{ getOptionName(scope.row.permission, coursePermitOptions) }}</span>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="from" align="center" width="80" label="类型">
        <template slot-scope="scope">
          <span
            class="color-222"
          >{{scope.row.courseType==0?'视频':(scope.row.courseType==1?'音频':'图文')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程分类">
        <template slot-scope="scope">
          <span v-for="(item,index) in scope.row.types" :key="index">
            {{item.name}}
            <font v-if="index<2">/</font>
          </span>
        </template>
      </el-table-column>
      <!--<el-table-column align="center"  label="观看权限">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ getOptionName(scope.row.permission, coursePermitOptions) }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column align="center" width="60" label="课程价格">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.price }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column width="100" align="center" label="讲师">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.lecturerName }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column align="center" width="80" label="是否热门">
        <template slot-scope="scope">
          <span class="color-222" v-if="scope.row.isHot">是</span>
          <span class="color-222" v-else>否</span>
        </template>
      </el-table-column>
      <!--
      <el-table-column align="center" width="50" label="是否预告">
        <template slot-scope="scope">
          <span style="color: green;" v-if="scope.row.isLive">√</span>
          <span style="color: red;" v-else>x</span>
        </template>
      </el-table-column>
      -->
      <el-table-column align="center" width="80" label="是否上架">
        <template slot-scope="scope">
          <span class="color-222" v-if="scope.row.status == 1">是</span>
          <span class="color-222" v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="(音频/视频)已传" v-if="from">
        <template slot-scope="scope">
          <div v-if="scope.row.courseType==0">
            <span class="color-222" v-if="scope.row.hasVideo">是</span>
            <span class="color-222" v-else>否</span>
          </div>
          <div v-if="scope.row.courseType==1">
            <span class="color-222" v-if="scope.row.hasAudio">是</span>
            <span class="color-222" v-else>否</span>
          </div>
          <div v-if="scope.row.courseType==2"></div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="80"
        label="视频已传"
        v-if="(listQuery.courseType === 0 || uploadShow) && !from"
      >
        <template slot-scope="scope">
          <span class="color-222" v-if="scope.row.hasVideo">是</span>
          <span class="color-222" v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="80"
        label="音频已传"
        v-if="(listQuery.courseType === 1 || uploadShow) && !from"
      >
        <template slot-scope="scope">
          <span class="color-222" v-if="scope.row.hasAudio">是</span>
          <span class="color-222" v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="140" label="发布日期" v-if="!previewShow">
        <template slot-scope="scope">
          <span class="color-222">{{scope.row.createdAt }}</span>
        </template>
      </el-table-column>

      <el-table-column width="210" align="center" label="操作">
        <template slot-scope="scope">
          <div class="text-alignL">
            <b
              v-if="(scope.row.courseType==0 && videoPermisson==3) || (scope.row.courseType==1 && audioPermisson==3) || (scope.row.courseType==2 && articlePermisson==3)"
              @click="linkToEdit(scope.row.courseId)"
            >编辑</b>

            <span
              class="color-409"
              v-if="scope.row.catalog == 1 || scope.row.catalog == 0"
            >|</span>

            <b
              @click="linkToDetail(scope.row.courseId, scope.row.catalog)"
            >{{ uploadText(scope.row.catalog) }}</b>

            <!-- <span
              v-if="(scope.row.courseType==0 && videoPermisson==3) || (scope.row.courseType==1 && audioPermisson==3) || (scope.row.courseType==2 && articlePermisson==3)"
              class="color-409"
            >|</span>

            <b @click="handleCopy(scope.row.courseId, scope.row.courseType, courseUrl, $event)">复制链接</b>-->
          </div>
          <div class="text-alignL">
            <b
              v-if="(scope.row.courseType==0 && videoPermisson==3) || (scope.row.courseType==1 && audioPermisson==3) || (scope.row.courseType==2 && articlePermisson==3)"
              @click="handleDelete(scope.$index, scope.row.courseId)"
            >删除</b>

            <span
              class="color-409"
              v-if="(wxPushShow || !previewShow) && (scope.row.courseType==0 && videoPermisson==3) || (scope.row.courseType==1 && audioPermisson==3) || (scope.row.courseType==2 && articlePermisson==3)"
            >|</span>

            <b
              v-if="(scope.row.courseType==0 && videoPermisson==3) || (scope.row.courseType==1 && audioPermisson==3) || (scope.row.courseType==2 && articlePermisson==3)"
              @click="messagePush(scope.$index)"
              v-show="wxPushShow"
            >微信推送</b>

            <span
              class="color-409"
              v-if="(wxPushShow || !previewShow) && (scope.row.courseType==0 && videoPermisson==3) || (scope.row.courseType==1 && audioPermisson==3) || (scope.row.courseType==2 && articlePermisson==3)"
            >|</span>
            <!--<span class="color-409" v-if="(scope.row.courseType==0 && videoPermisson==3) || (scope.row.courseType==1 && audioPermisson==3) || (scope.row.courseType==2 && articlePermisson==3)">|</span>-->
            <el-dropdown>
              <span class="el-dropdown-link">
                更多
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <b
                  style="padding:20px"
                  @click="linkToCourseComment(scope.row.courseId)"
                  v-if="!previewShow"
                >课程评论</b>
                <b
                  style="padding:20px"
                  @click="showMessageModel(scope.row)"
                  v-if="!previewShow"
                >消息推送</b>
                <b
                  style="padding:20px"
                  @click="toLowerShelf(scope.row.status,scope.row.courseId)"
                >{{scope.row.status == 1 ?'下架' :'上架'}}</b>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="消息推送" :visible.sync="messageModel" width="50%" :before-close="handleClose">
      <el-form
        :model="message"
        :rules="rules"
        ref="message"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="消息标题" prop="messageTile">
          <el-input v-model="message.messageTile"></el-input>
        </el-form-item>
        <el-form-item label="标题内容" prop="messageDesc">
          <el-input type="textarea" v-model="message.messageDesc"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="messageModel = false">取 消</el-button>
        <el-button type="primary" @click="pushMessage('message')">确 定</el-button>
      </span>
    </el-dialog>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <wechat-push v-if="isShowWechatPush" :courseData="courseData" @hideWechatPush="hideWechatPush"></wechat-push>
  </div>
</template>
<script>
import defultImg from "@/assets/defult270.png";
import {
  createCourse,
  getCourseList,
  getPermissionOptions,
  UpdateStatus
} from "@/api/course";
import { getParentCategories, getChildCategories } from "@/api/courseCategory";
import wechatPush from "../courses/components/wechatPush.vue";
import clip from "@/utils/clipboard";
import {
  enableWxPush,
  knowledge_courses_videos,
  knowledge_courses_audios,
  knowledge_courses_articles,
  knowledge_courses_previews,
  videoPlatformType
} from "@/utils/permission";
import { getVideoPlatformType } from "@/api/company";
import { delVideos } from "@/api/courseDetail";
const statusOptions = [{ key: 1, value: "是" }, { key: 0, value: "否" }];
const axios = require("axios");
export default {
  components: { wechatPush },
  watch: {
    $route: function(to, from) {
      this.initType = to.name;
      console.log(this.initType);
      if (
        to.name == "videos" ||
        to.name == "audios" ||
        to.name == "articles" ||
        to.name == "previews" ||
        to.name == "categories"
      ) {
        this.listQuery = {
          name: null, // 搜索的课程名或讲师名
          parentCatId: null, // 搜索选择的课程分类
          childCatId: null,
          permission: null, // 搜索选择的观看权限
          isHot: null, // 搜索选择的是否热门
          isLive: null,
          showCourse: -1,
          courseType: null, // 搜索选择的课程类型
          startTime: null, // 搜索的发布日期（开始）
          endTime: null, // 搜索的发布日期（结束）
          hasVideo: null,
          hasAudio: null,
          page: 1,
          limit: 20
        };
        this.createBtnShow = true;
        this.previewShow = false;
        this.initOption();
        this.initList();
      }
    }
  },
  data() {
    return {
      defultImg,
      permission: 3,
      initType: null,
      videoPermisson: 3,
      audioPermisson: 3,
      articlePermisson: 3,
      previewPermisson: 3,
      listQuery: {
        name: null, // 搜索的课程名或讲师名
        parentCatId: null, // 搜索选择的课程分类
        childCatId: null,
        permission: null, // 搜索选择的观看权限
        isHot: null, // 搜索选择的是否热门
        isLive: null,
        showCourse: -1,
        courseType: null, // 搜索选择的课程类型
        startTime: null, // 搜索的发布日期（开始）
        endTime: null, // 搜索的发布日期（结束）
        hasVideo: null,
        hasAudio: null,
        page: 1,
        limit: 20
      },
      parentCategoryOptions: [],
      childCategoryOptions: [],
      coursePermitOptions: [], // 观看权限
      statusOptions,
      tableData: [],
      total: null,
      listLoading: false,
      createBtnShow: true,
      // previewShow: false,
      isShowWechatPush: false,
      uploadShow: false,
      courseData: [],
      courseUrl: null,
      wxPushShow: true,
      createText: null,
      from: "",
      messageModel: false,
      message: {
        messageTile: "",
        messageDesc: "",
        typeId: "",
        messageTypeStatus: 1,
        messageType: ""
      },
      rules: {
        messageTile: [
          { required: true, message: "请输入消息标题", trigger: "blur" }
        ],
        messageDesc: [
          { required: true, message: "请输入消息内容", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.from = this.$route.query.from;
    this.initOption();
    this.initList();
    this.getVideoPermission();
  },
  methods: {
    toLowerShelf(val, id) {
      var status = "";
      if (val == 1) {
        status = -2;
      } else {
        status = 1;
      }

      UpdateStatus({ status: status, courseId: id })
        .then(res => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
        })
        .catch(err => {
          console.log(err);
        });
      this.initList();
    },
    showMessageModel(val) {
      if (val.courseType == 0) {
        this.message.messageType = 1;
      } else if (val.courseType == 1) {
        this.message.messageType = 2;
      } else if (val.courseType == 2) {
        this.message.messageType = 3;
      }
      this.message.typeId = val.courseId;
      this.messageModel = true;
    },
    pushMessage(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //成功
          pushMessage(this.message).then(res => {
            this.$message(res.data.data);
          });
          this.messageModel = false;
        } else {
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？");
    },
    getVideoPermission() {
      const video = knowledge_courses_videos() == 0 ? 0 : 4;
      const audio = knowledge_courses_audios() == 0 ? 0 : 2;
      const article = knowledge_courses_articles() == 0 ? 0 : 1;
      this.videoPermisson = knowledge_courses_videos();
      this.audioPermisson = knowledge_courses_audios();
      this.articlePermisson = knowledge_courses_articles();
      this.previewPermisson = knowledge_courses_previews();
      this.initType = this.$route.name;
      console.log("this.previewPermisson is :", this.previewPermisson);
      console.log("this.videoPermisson is :", this.videoPermisson);
      console.log("this.audioPermisson is :", this.audioPermisson);
      console.log("this.articlePermisson is :", this.articlePermisson);
      if (video || audio || article) {
        this.listQuery.showCourse = 0;
        this.listQuery.showCourse = video + audio + article;
      } else {
        this.listQuery.showCourse = -1;
      }
      this.listQuery.showCourse;
    },
    hideWechatPush(msg) {
      this.isShowWechatPush = msg;
    },
    initOption() {
      if (!enableWxPush()) {
        this.wxPushShow = false;
      }

      getParentCategories()
        .then(res => {
          this.parentCategoryOptions = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });

      getPermissionOptions()
        .then(res => {
          this.coursePermitOptions = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });

      const type = this.$route.name;
      let courseType = "";
      this.createText = "新增课程";
      switch (type) {
        case "videos":
          courseType = 0;
          this.createText = "新增视频";
          break;
        case "audios":
          courseType = 1;
          this.createText = "新增音频";
          break;
        case "articles":
          courseType = 2;
          this.createText = "新增图文";
          break;
        case "previews":
          this.listQuery.isLive = 1;
          this.previewShow = true;
          break;
      }
      this.listQuery.courseType = courseType;
      this.uploadShow = false;

      // 分类查看课程
      if (this.$route.name == "categories") {
        this.createBtnShow = false;
        let childCatId = localStorage.getItem("childId");
        let parentCatId = localStorage.getItem("parentId");
        if (parentCatId == 0) {
          parentCatId = childCatId;
          childCatId = null;
        }
        this.parentSelect(parentCatId);
        this.listQuery.parentCatId = parseInt(parentCatId);
        this.listQuery.childCatId =
          childCatId == null ? childCatId : parseInt(childCatId);
        this.uploadShow = true;
      }
    },
    getModelPermission() {
      if (this.listQuery.courseType == 0) {
        this.permission = knowledge_courses_videos();
      } else if (this.listQuery.courseType == 1) {
        this.permission = knowledge_courses_audios();
      } else if (this.listQuery.courseType == 2) {
        this.permission = knowledge_courses_articles();
      } else {
        this.permission = knowledge_courses_previews();
      }
    },
    initList() {
      this.listLoading = true;

      getCourseList()
        .then(res => {
          this.tableData = res.data.data.list.data;
          // this.total = res.data.data.list.total;
          // this.courseUrl = res.data.data.url;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    parentSelect(id) {
      this.childCategoryOptions = [];
      this.listQuery.childCatId = null;
      if (!id) {
        return false;
      }

      getChildCategories(id)
        .then(res => {
          this.childCategoryOptions = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    timeCheck(type) {
      if (
        this.listQuery.startTime &&
        this.listQuery.endTime &&
        this.listQuery.startTime > this.listQuery.endTime
      ) {
        this.$message({
          message: "结束时间不能小于开始时间",
          type: "error"
        });

        if (type == 1) {
          this.listQuery.startTime = null;
        } else {
          this.listQuery.endTime = null;
        }
      }
    },
    getOptionName(id, data) {
      let name = "";
      for (const item in data) {
        if (data[item] == id) {
          name = item;
          break;
        }
      }
      return name;
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.initList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.initList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.initList();
    },
    handleDelete(index, id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          deleteCourse(id)
            .then(res => {
              if (res.data.statusCode == 200) {
                this.listLoading = false;
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.tableData.splice(index, 1);

                // 删除该课程下的所有视频
                delVideos(id);
              } else {
                this.listLoading = false;
                this.$message({
                  type: "error",
                  message: "删除失败!"
                });
              }
            })
            .catch(err => {
              this.listLoading = false;
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    wxPush(courseId) {
      // 确认微信消息推送方法
      this.$confirm("此操作将微信推送该课程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true
      })
        .then(() => {
          wxPush(courseId)
            .then(res => {
              this.$message({
                type: "success",
                message: "推送成功!"
              });
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消推送"
          });
        });
    },
    messagePush(index) {
      this.isShowWechatPush = true;
      this.courseData = this.tableData[index];
    },
    linkToCourseComment(id) {
      this.$router.push({ name: "courseComment", params: { courseId: id } });
    },
    linkToCreate() {
      const type = this.$route.name;
      this.$router.push({ name: "createCourse", params: { courseType: type } });
    },
    linkToEdit(id) {
      const type = this.$route.name;
      this.$router.push({
        name: "editCourse",
        query: {
          courseType: type,
          courseId: id
        }
      });
    },
    linkToDetail(id, type) {
      if (type == 1) {
        getVideoPlatformType().then(res => {
          if (res.data.data[0].videoPlatformType == 1) {
            this.$router.push({
              name: "uploadVideo",
              params: { courseId: id }
            });
          } else {
            this.$router.push({
              name: "uploadVideoLeShi",
              params: { courseId: id }
            });
          }
        });
      } else if (type == 0) {
        this.$router.push({ name: "uploadAudio", params: { courseId: id } });
      }
    },
    uploadText(type) {
      if (type == 0) {
        return "上传音频";
        } else if (type == 1) {
        return "上传视频";
      }
    },
    handleCopy(id, type, url, event) {
      let name = "";
      if (type == 0) {
        name = "video";
      } else if (type == 1) {
        name = "voice";
      } else if (type == 2) {
        name = "imgText";
      }

      if (this.$route.name == "previews") {
        url += `courseForenotice?cId=${id}`;
      } else {
        url += name + `?courseId=${id}&extId=-1&ckFrom=5`;
      }

      clip(url, event);
    },
    setDefultImg(e) {
      e.target.src = defultImg;
    }
  }
};
</script>

<style scoped>
.isFree {
  height: 17px;
  line-height: 17px;
  border-radius: 3px;
  border: 1px solid #409eff;
  margin-left: 5px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
